<template>
  <div ref="list" @scroll="onScroll" class="article-list">
    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
      <!--
        load事件绑定的onLoad方法，是用来加载数据的方法
            1. 它在页面打开时会自动调用
            2. 它在没有铺满一屏时还会再调用
            3. 当你快滚到最后时也会自动调用

        finished：用来标记是否全部加载完毕
            如果它为true，onLoad不会再调用
            所以默认值应该给false
            所以每次加载完数据还要判断是否全部加载完毕，如果全部加载完毕，就改为true

        v-model绑定的loading：  用来标记本次的加载状态
            为true代表正在加载，为false代表没有在加载
            默认值应该为false，不然onLoad不会被调用
            但是，当onLoad调用时会自动把loading改为true
            所以如果我们每次加载完数据得手动把loading改为false才行
    -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.art_id"
          @click="$router.push(`/article/${item.art_id}`)"
        >
          <!-- 1. 标题 -->
          <div class="title">{{ item.title }}</div>
          <!-- 2. 图片 -->
          <!-- column-num设置一行多少列 -->
          <van-grid :border="false" :column-num="item.cover.type">
            <van-grid-item
              v-for="(pic, index) in item.cover.images"
              :key="index"
            >
              <van-image :src="pic" />
            </van-grid-item>
          </van-grid>
          <!-- 3. 信息 -->
          <div class="info-box">
            <span class="name">{{ item.aut_name }}</span>
            <span class="cmt">{{ item.comm_count }}评论</span>
            <span class="time">{{ $relvTime(item.pubdate) }}</span>
            <van-icon style="float:right;" name="cross" />
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { newsListAPI } from '@/api/news'

export default {
  // 儿子伸手要
  props: {
    channel_id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: Date.now(),
      pullLoading: false,
      scrollTop: 0
    }
  },

  // 当组件被缓存后，会多两个钩子
  // activated(显示调用)， deactivated(隐藏调用)
  activated () {
    // 把之前存的位置，再重新赋值给盒子的scrollTop
    this.$refs.list.scrollTop = this.scrollTop
  },

  methods: {
    onScroll () {
      // 保存滚动条位置
      this.scrollTop = this.$refs.list.scrollTop
    },
    // 下拉并松手后触发
    async onRefresh () {
      // 我们在这里要做刷新的操作
      // 刷新完记得要把pullLoading改为false，不然一直显示加载中
      // 发请求获取新闻列表
      const res = await newsListAPI({
        channel_id: this.channel_id,
        // 查当前时间戳的新闻
        timestamp: Date.now()
      })
      // 我们本来就是要用最新新闻覆盖
      this.list = res.data.results
      // 刷新成功记得把pullLoading改为false
      this.pullLoading = false
      // 但凡下拉了就代表是全新的数据要重头开始，所以都该无条件的把finished改为false
      this.finished = false
      // 把上一个时间段的时间戳更新
      this.timestamp = res.data.pre_timestamp
    },

    async onLoad () {
      // 发请求
      const res = await newsListAPI({
        channel_id: this.channel_id,
        // 查当前时间戳的新闻
        timestamp: this.timestamp
      })

      // 赋值会把原本的值
      this.list.push(...res.data.results)

      // 保存上一个时间段的新闻时间戳
      this.timestamp = res.data.pre_timestamp

      // 代表本次加载结束，可以进行下次加载
      this.loading = false

      //   // 判断是否全部加载完毕
      //   if (this.timestamp === null) {
      //     // 全部加载完毕
      //     this.finished = true
      //   }
      // 下面这句话相当于那一坨if
      this.finished = this.timestamp === null
    }
  }
}
</script>

<style lang="less" scoped>
.article-list {
  position: fixed;
  top: 90px;
  bottom: 50px;
  overflow: auto;
  width: 100vw;

  .van-image {
    height: 120px;
  }

  .info-box {
    span {
      font-size: 12px;
      color: gray;
    }
    .cmt {
      margin: 0 15px;
    }
  }
}
</style>
